import React, {Component} from 'react';
import './index.css'
class Footer extends Component {
    render() {
        const {todoList} = this.props
        const length = todoList.length
        const checkedLength = todoList.reduce((pre,item)=>item.isChecked? pre+1:pre,0)
        let flag = false
        if(length===checkedLength&&length!==0){
            flag = true
        }
        return (
            <div className="todo-footer">
                <label>
                    <input onChange={()=>this.props.changeAllIsChecked(!flag)} type="checkbox" checked={flag} />
                </label>
                <span>
              <span>已完成{checkedLength}</span> / 全部{length}
            </span>
                <button className="btn btn-danger" onClick={this.props.deleteSelected} style={{display:checkedLength>0? 'block':'none'}}>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;